<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/content.css" />
		<link rel="stylesheet" href="css/toast.css" />
		<script src="js/toast.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/template.js"></script>
         <script src="js/config.js"></script>
	
		
	</head>

	<body>
		
		
		
		<div class="container">

			<!--<header class="mui-bar mui-bar-nav">-->
				<!--<a href="./list.html" class="back mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
				<!--<h1 class="mui-title">注册详情</h1>-->
			<!--</header>-->
			<!--弹出层-->
			
				<div class="tan">

			<div class="mengban">
				<div class="dContent">

					<img class="bigPreview" src="" alt="" />

				</div>

				<div class="dclose">
					<img src="./images/red-close.png" alt="" />
				</div>

			</div>


		</div>
			
			
			
			 <!--内容区-->
			<div class="head">
				<div class="money">
					<span>+</span>
					<span class="qian">25</span>
					<span>元</span>
				</div>
				<div class="time">
					<span class="span">
						<span>剩余时间:</span>
						<span class="stime">59:59</span>
					</span>
				</div>
				
				<div class="img">
					<img class="img1" src="" alt="" />
					<p class="text">设么授权</p>
				</div>
				
			</div>
			
			
			<div class="content">
				<div class="xuzhi">
					
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right red">仅限【<span class="task"></span>】新用户</span>
					</div>
					
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right"></span>
					</div>
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right"></span>
					</div>
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right"></span>
					</div>
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right"></span>
					</div>
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right"></span>
					</div>
				</div>
				
				
				
				
				<div class="jiaocheng">
					 <div class="mui-slider visibileToggle">
				 		<div class="mui-slider-group gropRight">
				 	  		 <div>
						      <!-- 具体内容 -->
						      	<div class="pto txt">
								
									<h4>详细教程</h4>
									<span>共<span class="bushu">5</span>步</span>
								</div>
						    </div>
						    
					  	
					  			
					  			<div class="mui-slider-item">
						      		<!-- 具体内容 -->
							     	 <div class="pto meng">
								      	<img class="img min" src="" alt="" data-preview-src="" data-preview-group="1" />
										<i class="inum">1</i>
								 	</div>
								</div>
					  		
						</div>
			
				
				</div>

                    <div class="btn-wrapper">
                        <div class="begin">

                            <a class="btn-begin">开始任务</a>

                        </div>

                        <div class="end">

                            <a class="end-begin">放弃任务</a>

                        </div>
                    </div>
					
				</div>
					
					     
			
			
			<div class="message">
				<div class="m_tet">
					<form class="mui-input-group" action="#" method="post">
					    <div class="mui-input-row">
					        <label>姓名</label>
					        <input type="text" class=" shu1 mui-input-clear" placeholder="注册所用姓名" onfocus="this.placeholder=''" onblur="this.placeholder='注册所用姓名'">
					    </div>
					    
					    <div class="mui-input-row">
					        <label>手机号</label>
					        <input type="number" class=" shu2 mui-input-clear" placeholder="注册所用手机号" onblur="upperCase()">
					        
					    </div>
					    
					    <input id="formStatus" type="hidden" value="false">

					</form>



				</div>

				
				<div class="jietu">
					
						
					
					<h2 class="jietuTitle">上传截图</h2>
					
					<div class="feedback">
			
							<div class="dynamic_images">
								<!--示例的图片-->
								<div class="shili">

									<ul class="shiliUl">
										<div class="shiliTxt">
											<h4>示例图片</h4>
											<span>共<span class="shiliShu">5</span>步</span>
										</div>

										<li>
											<img class="shiliImg" src="./images/2.jpg" alt="" />
										</li>



									</ul>
								</div>

								<!--上传的图片-->
								<ul>
									<li id="tuList">
										
									<lable  for="file"><input class="none" id="file" type="file" name="pictureA_file" accept="image/*;"/></lable>
									
									</li>
					
								</ul>
							</div>
						</div>
					

				</div>
				
				
				<div class="tijiao">
					
					
					<a class="btn1">提交任务</a>
				</div>
				
				<div class="tip">任务提交后到账需要1-3个工作日</div>
			</div>
			
			
			
		</div>
		
		
		
			<script>
				var oList = [];

                var id=location.search.split("=")[1];//从=号后面的内容
				console.log("第几个li"+id);
				var taskId="";
                $(".btn1").eq(0).css({background: "#4A90E2"});

//			var data = (localStorage.getItem("sou"));
					
				$.ajax({
					url:host+"/buss/task/getOne?id="+id,
					type:"get",
					success:function(res){
						console.log(JSON.stringify(res));

                           if(res.success){
                               var name = res.data;
                               var url = name.skipHerf;
                               var money = name.userPrice;
                               var nextime = name.sout;
                               var text = name.name;
                               var remarks = name.remarks
                               var imgUrl = name.imgIcon;
                                var taskStatus = name.taskStatus;
                               var imgShili = name.imgShili.split(",");
                               taskId =name.id;
                               var shiliImg = [];
                               if(name.imgUploadShili !== null && name.imgUploadShili.length > 0){
                                   shiliImg =name.imgUploadShili.split(",");
                               }


                               console.log(url +"ni"+money)

                               document.getElementsByClassName("img1")[0].setAttribute("src",imgUrl);
                               document.getElementsByClassName("qian")[0].innerText= money;
                               document.getElementsByClassName("xuzhi")[0].innerHTML= remarks;
                               document.getElementsByClassName("text")[0].innerText= text;

                               //投放中的任务的放弃任务颜色灰色
                               if(taskStatus == 0) {
                                   $(".end-begin").eq(0).css({background:"#ccc"})

                               }
                               //渲染步骤图片

                               if(imgShili!==null && imgShili.length>0){
                                   var leng= imgShili.length;
                                   var str = "";
                                   $(".visibileToggle").eq(0).css({display:"block"});
                                   $(".bushu").eq(0).html(leng)

                                   for(let i = 0;i < leng;i++){
                                       var n =i+1;
                                       str+='<div class="mui-slider-item">'+
                                           '<div class="pto meng" onclick="big(\''+ imgShili[i] + '\')" data-num=" '+ n +' ">'+
                                           '<img class="img min" src=" '+imgShili[i] +' " alt=""  data-preview-src="" data-preview-group="1" />'+
                                           '</div>'+
                                           '</div>';


                                   }

                                   var str1='<div class="mui-slider-item">'+
                                       '<div class="pto txt">'+
                                       '<h4>详细教程</h4>'+
                                       '<span>共<span class="bushu">5</span>步</span>'+
                                       '</div>'+
                                       '</div>';


                                   var str2 = str1 + str
                                   $(".gropRight").eq(0).html(str2);
                                   $(".bushu").eq(0).html(leng);
                               }


                               //上传图片时的示例图片
                               if(shiliImg!==null && shiliImg.length>0){
                                   var leng1= shiliImg.length;
                                   console.log("示例图片的长度："+leng1);
                                   var strA = "";
                                   $(".shili").eq(0).css({display:"block"});


                                   for(let i = 0;i < leng1;i++){

                                       strA+='<li onclick="big(\'' + shiliImg[i] + '\')">'+
                                           '<img class="shiliImg" src="'+shiliImg[i] +'" alt="" />'+
                                           '</li>'	;
                                   }

                                   $(".shiliUl").eq(0).html(strA);
                                   $(".shiliShu").eq(0).html(leng1);
                               }



                               //倒计时

                               function strTime() {

                                   var minute = 0,
                                       second = 0;

                                   --nextime;
                                   //时间默认值

                                   if (nextime > 0) {
                                       minute = Math.floor(nextime / 60);
                                       second = Math.floor(nextime - minute * 60);
                                   }

                                   if (minute <= 9) {
                                       minute = '0' + minute;
                                   }
                                   if (second <= 9) {
                                       second = '0' + second;
                                   }

                                   if (Math.floor(nextime) == 0) {
                                       result = "00 : 00 ";
                                       clearInterval(intervalId);
                                   }

                                   result = minute + ":" + second;
                                   document.getElementsByClassName("stime")[0].innerText= result;

                               }

                               var intervalId = setInterval(function(){
                                   strTime();
                               },1000);



                               //开始任务
                               document.getElementsByClassName("begin")[0].addEventListener("click",function(){
                                   window.location.href= url;

                               },false)

                               //提交任务
                               function tijiao(){
                                   //判断是否输入手机号，姓名
                                   console.log(oList);
                                   console.log(oList.length);
                                   var ming = document.getElementsByClassName("shu1")[0].value;
                                   var number = document.getElementsByClassName("shu2")[0].value;
                                   var imgPath;

                                   if(oList.length == 1){
                                       imgPath = oList[0]
                                   }else{
                                       var patt="";
                                       for(var a = 0;a < oList.length-1;a++){
                                           patt+=oList[a]+","
                                       }
                                       imgPath=patt+oList[oList.length-1]
                                   }

                                   console.log(ming+":"+number+":"+taskId+"]]]"+imgPath);



                                   //上传任务
                                   $.ajax({
                                       type: 'POST',
                                       url: host+"/buss/task/log/save",
                                       data: {
                                           taskId:id,
                                           name:ming,
                                           phone:number,
                                           imgUpload:imgPath

                                       },
                                       success: function(res){
                                           console.log(res.msg);
                                           console.log("提交成功")
                                           if(res.success){
                                               window.location.href ="./list.html"
                                           }

                                           if(!res.success){
                                               toast(res.msg,500);
                                           }
                                       },
                                       error:function(){
                                           console.log("error")
                                       }


                                   });

                               }


                               //上传图片

                               var inputBox = document.getElementById("file");
                               var img = document.getElementById("img");
                               var index = 0;
                               inputBox.addEventListener("change",function(){

                                   upload(inputBox.files[0]);
                                   var oDiv = document.createElement("div");
                                   var omg = document.createElement("img");
                                   omg.setAttribute("class","imgSmall");
                                   oDiv.setAttribute("class","imgDiv");
                                   oDiv.innerHTML='<img class="imgClose" src="./images/close.png">'
                                   oDiv.appendChild(omg);

                                   document.getElementById("tuList").appendChild(oDiv);
                                   var file = this.files[0];
                                   if(!!file){
                                       //读取本地文件，图片文件转换为base64
                                       var reader = new FileReader();
                                       reader.readAsDataURL(file);
                                       reader.onload = function(){
                                           //读取完毕后输出结果
                                           console.log(this.result);
                                           omg.setAttribute("src",this.result);
                                           omg.setAttribute("data-index",index);
                                           index++;
                                       }
                                   }

                               })


                               $("#tuList").on("click",".imgDiv",function(){
                                   var i = $(this).find(".imgSmall").attr("data-index");
                                   oList.splice(i,1);
                                   $(this).remove();
                                   console.log("看看剩余的图片数组内容"+oList)
                               })


                               $(".btn1").eq(0).click(function(){
                                  if( checkform()) {
                                      tijiao();
                                  }

                               });

                               function checkform(){
                                   if($(".shu1").eq(0).val().length == 0){
                                       toast("请输入姓名",500);
                                       return false;
                                   }

                                   if($(".shu2").eq(0).val().length == 0){
                                       toast("请输入手机号",500);
                                       return false;
                                   }
                                   // 取消图片验证，先测试后面流程
                                   if(oList.length<1){
                                       toast("请上传图片",500);
                                       return false;
                                   }
                                   return true;
                               }
                               function upload(file){
                                   var formdata = new FormData();
                                   // 上传到服务器的字段名称
                                   formdata.append("file",file);
                                   $.ajax({
                                       url:host+"/upload/Img",
                                       type: 'POST',
                                       cache: false,
                                       data: formdata,
                                       timeout: 5000,
                                       //必须false才会避开jQuery对 formdata 的默认处理
                                       // XMLHttpRequest会对 formdata 进行正确的处理
                                       processData: false,
                                       //必须false才会自动加上正确的Content-Type
                                       contentType: false,
                                       xhrFields: {
                                           withCredentials: true
                                       },
                                       success: function(data) {
                                           console.log(JSON.stringify(data))
                                           if(data.success){
                                               oList.push(data.data);
                                               $("#formStatus").val("true");
                                               checkform();
                                           }else{
                                               toast("请稍等，正在上传图片",500);
                                           }


                                       },
                                       error: function(XMLHttpRequest, textStatus, errorThrown) {

                                       }
                                   })
                               }
						   }
				 
				 }

				   
				})
					
			
			


                //点击返回列表
			
			$(".dLi").eq(0).click(function(){
				window.location.href="./list.html"
			})
			
			//点击放弃任务
			
			$(".end-begin").eq(0).click(function(){
				console.log("fangqirenwu"+taskId)
				$.ajax({
					url:host+"/buss/task/log/del?taskId="+id,
					type:"post",
					 
					 success:function(res){
					 	console.log(JSON.stringify(res))
                         toast(res.msg,500);
					 		setTimeout(function(){
					 			window.location.href="./list.html";
					 		},500)
					 		

					 },
					 error:function(){
					 	console.log("放弃任务ajax失败")
					 }
				})
			})



                //点击图片放大
                function big(src){
                    console.log(src)
                    $(".bigPreview").eq(0).attr("src",src)
                    $(".tan").eq(0).css({display:"block"});

                    $(".dclose").eq(0).click(function(){
                        $(".tan").eq(0).css({display:"none"});
                    })


                }
		
		
			//验证手机号码
		function upperCase(){
			
	        var phone = document.getElementsByClassName('shu2')[0].value;
	
		        if(!(/^1[34578]\d{9}$/.test(phone))){

                    toast("手机号码有误，请重填",500);
		            this.placeholder='注册所用手机号'
		            return false; 
	
	        	} 

        }
		
		</script>
        </div>
	</body>

</html>